import React from 'react';
import num_1 from '@/styles/imgs/num_1.png';
import num_2 from '@/styles/imgs/num_2.png';
import num_3 from '@/styles/imgs/num_3.png';
import hot from '@/styles/imgs/picture-hot.png';
import { Button, message, Icon } from 'antd';
import { getData, postFn } from "@/api/commonApi";
import { getInnerText, saveLocalStorage } from "@/utils";
import { withRouter } from 'react-router-dom';
class ContentCom extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            newsData: [],
            hotProductData: [],
        }
    }
    componentDidMount() {
        this.getHomeNewsData();
        this.getHotProductData();

    }
    // 查看明细
    lookMx(num: number) {
        if (num === 4) {
            console.log('go4');
            return
        }
        message.warning(`当前模块：${num}，明细页面开发中！`);
    }

    render() {
        return (
            <div className="i7b-home-content">
                <div className="picture-box">
                    <div className="picture-b-c">
                        <h3>热销推荐<img src={hot} alt="hot" /></h3>
                        <ul>{this.state.hotProductData.map((item: any, inx: number) => {
                            return (
                                <li key={inx}>
                                    <div className="li-content">
                                        <div className={`l-c-t ${item.hotImg}`}>
                                            {item.title}
                                            <span className="sm-t">{item.subTitle}</span>
                                        </div>
                                        <div className="l-c-body">
                                            {item.desc.map((subItem: any, subInx: number) => {
                                                return (
                                                    <p key={subInx}><Icon type="check-circle" /> {subItem.p} </p>
                                                )
                                            })}
                                        </div>
                                        <div className="l-c-footer">
                                            <div className="l-c-f-t">
                                                每月<sup>￥</sup><span className="span-jg">{item.price}</span>起
                                        </div>
                                            <div className="l-c-f-f">
                                                <Button href={item.details} style={{ width: '80%' }}>查看详情</Button>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            )
                        })}
                        </ul>
                    </div>
                </div>
                <div className="num-1">
                    <div className="n-c common-width">
                        <div className="num-icon">
                            <img src={num_1} alt="num_1" />
                        </div>
                        <h3>
                            轻松拥有自己的云数据中心资源
                            <span>Easily own your own cloud data center resources</span>
                        </h3>
                        <p className="n-c-p">
                            通过GW Cloud 实现虚拟云数据中心，您可以快速搭建属于自己的私有云服务；基于互联网的计算方式，共享的软硬件资源和信息可以按需提供给计算机和其他设备。
                        </p>
                        <Button onClick={this.lookMx.bind(this, 1)}>查看明细</Button>
                    </div>
                </div>
                <div className="num-2">
                    <div className="n-c common-width">
                        <div className="num-icon">
                            <img src={num_2} alt="num_2" />
                        </div>
                        <h3>
                            秒级调配您的资源 最大限度降低总拥有成本
                            <span>Allocate your resources in seconds to minimize total cost of ownership</span>
                        </h3>
                        <p className="n-c-p">
                            云平台，不光给您的是云数据中心资源，所有计算、存储、网络资源都是秒级响应。如果初始资源不够用，可以弹性扩展伸缩。让您可以随时调整业务规模，无需考虑计费周期的限制。
                        </p>
                        <Button onClick={this.lookMx.bind(this, 2)}>查看明细</Button>
                    </div>
                </div>
                <div className="num-3">
                    <div className="n-c common-width">
                        <div className="num-icon">
                            <img src={num_3} alt="num_3" />
                        </div>
                        <h3>
                            最大程度保障您的数据安全
                            <span>Maximize your data security</span>
                        </h3>
                        <p className="n-c-p">
                            私有网络提供100%二层隔离，在这个环境里，你的内部数据是非常安全的，黑客无法嗅探或者截获到你的数据。多重实时副本和备份可以保障即使在物理硬件彻底损坏时，数据也不会丢失，并且可以很快恢复业务。
                        </p>
                        <Button onClick={this.lookMx.bind(this, 3)}>查看明细</Button>
                    </div>
                </div>
                <div className="num-4">
                    <div className="n-c common-width">
                        <ul className="n-c-ul">
                            {this.state.newsData.map((item: any, inx: number) => {
                                if (item.title) {
                                    return (
                                        <li key={inx}>
                                            <div className="news-item">
                                                <span className="news-date">
                                                    {item.date.slice(2)}
                                                </span>
                                                <div className="news-title">{item.title}</div>
                                                <div className="news-desc" dangerouslySetInnerHTML={{ __html: getInnerText(item.content) }}></div>
                                                <span className="news-details" onClick={this.lookNewsDetails.bind(this, item)}></span>
                                            </div>
                                        </li>
                                    )
                                } else {
                                    return (
                                        <li key={inx} className="not-data">没有数据</li>
                                    )
                                }
                            })}
                        </ul>
                        <div className="text-center"><Button onClick={this.lookNewsDetails.bind(this, "more")}>查看更多</Button></div>
                    </div>
                </div>
                <div className="num-5">
                    <div className="n-c common-width">
                        <p className="n-5-c-p">
                            云平台是一个提供按需分配、弹性可伸缩的计算能力的公有云服务。
                            通过使用云平台， 您不必再为了软件开发、测试、以及应用/服务上线运行而购买物理设备了，也不必投入人力物力进行设备维护。
                            您可以直接在云平台中迅速得到任意您需要的云服务器ECS、云存储、云网络、云安全等方方面面的能力，并可以随时调整它们的规模，
                            从而轻松拥有一个属于自己的专属云平台。
                        </p>
                        <ul className="n-5-c-ul">
                            <li>
                                <span>200+</span>
                                <span>云数据中心</span>
                            </li>
                            <li>
                                <span>600+</span>
                                <span>带宽资源</span>
                            </li>
                            <li>
                                <span>300+</span>
                                <span>服务器集群</span>
                            </li>
                            <li>
                                <span>5200+</span>
                                <span>用户选择</span>
                            </li>
                            <li>
                                <span>110+</span>
                                <span>开放API</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
    // 查看新闻详情
    lookNewsDetails(news: any) {
        let url = news === "more" ? "/news/anc" : "/news/" + news.code;
        if (news !== "more") {
            let data = {
                open: true,
                content: news
            };
            saveLocalStorage('showDetail', data);
        }
        this.props.history.push(url);
    }

    // 获取新闻数据
    async getHomeNewsData() {
        let res: any = await postFn("getNews", { code: 'anc' });
        if (!res) {
            res = {
                data: [],
            };
        }
        let newsData = [];
        newsData[0] = res.data[0] || {};
        newsData[1] = res.data[1] || {};
        newsData[2] = res.data[2] || {};
        this.setState({
            newsData: newsData
        })
    }

    // 获取热销产品数据
    async getHotProductData() {
        let res: any = await getData("getHotProductData");
        if (!res) {
            res = {
                data: [],
            };
        }
        let hotProductData = [...res.data];
        this.setState({
            hotProductData: hotProductData
        })
    }
}

export default withRouter(ContentCom);